<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>

    <!-- 使用 link 指定标题栏小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- 使用 link 链接外部样式文件 -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="css/site-topbar.css">
    <link rel="stylesheet" href="css/site-header.css">
    <link rel="stylesheet" href="css/home-hero.css">

    <link rel="stylesheet" href="css/phone.css">
    <link rel="stylesheet" href="css/appliances.css">
</head>

<body>

    <!-- 最顶端的导航条区域 -->
    <div class="layout-wrapper site-topbar">
        <div class="layout-center site-topbar-center">

            <!-- 顶部导航条 -->
            <div class="site-topbar-nav">
                <a rel="nofollow" href="//www.mi.com/index.html">小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//qiye.mi.com/" target="_blank">企业团购</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank" id="J_siteDownloadApp" class="topbar-download">
                    下载app</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="https://xiaomishare.mi.com/?from=micom" target="_blank">智能生活</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion">Select Location</a>
            </div>
            <!-- 顶部导航条结束 -->

            <!-- 顶部购物车 -->
            <div class="site-topbar-cart">
                <a rel="nofollow" href="#">
                    <em class="iconfont-cart"></em>
                    <em class="iconfont-cart-full hide"></em> 购物车
                    <span class="cart-mini-num J_cartNum">（0）</span>
                </a>
            </div>

            <!-- 顶部信息条 -->
            <div class="site-topbar-info">
                <a rel="nofollow" href="//order.mi.com/site/login?redirectUrl=https://www.mi.com/">登录</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//account.xiaomi.com/pass/register">注册</a>
                <span class="sep">|</span>
                <span class="message">
                        <a rel="nofollow" class="J_needAgreement" >消息通知</a>
                    </span>
            </div>

        </div>
    </div>

    <!-- LOGO区域 ( 包含商品分类 和 搜索框 ) -->
    <div class="layout-wrapper site-header">
        <div class="layout-center site-header-center">
            <!-- 头部LOGO -->
            <div class="site-header-logo">
                <a href="http://www.mi.com" class="logo"></a>
            </div>
            <!-- 头部导航条 -->
            <!-- site-header-nav 采用 相对定位(但不移动位置)，目的是让 site-category 先对该元素进行定位 -->
            <div class="site-header-nav">
                <ul class="site-header-nav-list">
                    <li class="site-header-nav-list-category">
                        <div class="site-category">
                            <ul class="site-category-list">
                                <li class="site-category-item">
                                    <a href="#" class="title">
                                        <b>手机 电话卡</b>
                                        <i class="fa fa-angle-right"></i>
                                    </a>
                                    <div class="site-category-item-children"></div>
                                </li>
                                <li class="site-category-item">
                                    <a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a>
                                    <div class="site-category-item-children"></div>
                                </li>
                                <li class="site-category-item">
                                    <a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a>
                                    <div class="site-category-item-children"></div>
                                </li>
                                <li class="site-category-item">
                                    <a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a>
                                    <div class="site-category-item-children"></div>
                                </li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                                <li class="site-category-item"><a href="#" class="title"><b>手机 电话卡</b><i class="fa fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">小米手机</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">Redmi红米</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">电视</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">笔记本</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">家电</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">路由器</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">智能硬件</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">服务</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">社区</a>
                    </li>
                </ul>
            </div>
            <!-- 头部搜索框 -->
            <div class="site-header-search">
                <form action="#" class="site-header-search-form">
                    <a class="site-header-search-form-input">
                        <input type="text">
                    </a>
                    <a class="site-header-search-form-submit">
                        <button type="submit" class="fa fa-search"></button>
                    </a>
                </form>
            </div>
        </div>
    </div>

    <div class="layout-wrapper home-hero">
        <div class="layout-center home-hero-center">
            <div class="home-hero-swiper">
                <dl>
                    <dt></dt>
                    <dd>
                        <!-- 在HTML中使用img标签嵌入图像时，若使用相对路径，则相对当前HTML文件所在目录 -->
                        <a href="#"><img src="images/heisha.jpg"></a>
                    </dd>
                    <dt></dt>
                    <dd>
                        <a href="#"><img src="images/redmi-max.webp"></a>
                    </dd>
                    <dt></dt>
                    <dd>
                        <a href="#"><img src="images/redmi-k30s.webp"></a>
                    </dd>
                    <dt class="home-hero-swiper-active"></dt>
                    <dd>
                        <a href="#"><img src="images/redme-notebook.webp"></a>
                    </dd>
                </dl>
            </div>
            <!-- 使用 script 标签 引入外部的 JavaScript 脚本文件  -->
            <script type="text/javascript" src="scripts/swiper.js"></script>
        </div>
    </div>


    <!-- 手机板块 -->
    <div class="layout-wrapper phone">
        <div class="layout-center phone-center">
            <div class="phone-header">
                <h2 class="title">手机</h2>
                <a href="https://www.mi.com/a/h/14933.html" class="more">
                    查看更多
                    <i class="fa fa-chevron-circle-right"></i>
                </a>
            </div>
            <div class="phone-list">
                <div class="phone-hot">
                    <a href="https://www.mi.com/mi11" class="brick">
                        <img src="images/xiaomi11.webp">
                    </a>
                </div>
                <div class="phone-items">
                    <div class="brick brick-margin item">
                        <a href="#">
                            <div class="figure">
                                <img src="images/xiaomi-10s.webp">
                            </div>
                            <h3 class="title">小米10S</h3>
                            <p class="desc">骁龙870 | 对称式双扬立体声</p>
                            <p class="price">
                                <span class="num">3299</span>
                                <span>元</span>
                                <span>起</span>
                            </p>
                        </a>
                    </div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                    <div class="brick brick-margin item"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layout-wrapper home-banner-wrapper">
        <div class="layout-center home-banner-center">
            <a href="#">
                <img src="images/tv.webp">
            </a>
        </div>
    </div>

    <!-- 家电模块 -->
    <div class="layout-wrapper appliances">
        <div class="layout-center appliances-center">

            <div class="appliances-header">
                <h2 class="title">家电</h2>
                <div class="more">
                    <ul class="tab-list">
                        <li class="tab-active">热门</li>
                        <li>电视影音</li>
                    </ul>
                </div>
            </div>

            <div class="appliances-list">
                <div class="appliances-hot">
                    <a href="#" class="brick brick-margin-bottom">
                        <img src="images/redmi-tv-max-98.webp">
                    </a>
                    <a href="#" class="brick brick-margin-bottom">
                        <img src="images/xiaomi-tv-4a-60.webp">
                    </a>
                </div>
                <div class="appliances-items">

                    <div class="appliances-item-container-active hot ">
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-e65x.webp">
                                </div>
                            </a>
                        </div>
                        <div class="brick-margin item ">
                            <div class="half brick brick-margin-bottom">
                                <a href="#" class=" "></a>
                            </div>
                            <div class="half brick">
                                <a href="#" class=""></a>
                            </div>
                        </div>
                    </div>

                    <div class="media">
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick brick-margin item">
                            <a href="#">
                                <div class="figure">
                                    <img src="images/xiaomi-tv-4s-75.jpg">
                                </div>
                            </a>
                        </div>
                        <div class="brick-margin item ">
                            <div class="half brick brick-margin-bottom">
                                <a href="#" class=" "></a>
                            </div>
                            <div class="half brick">
                                <a href="#" class=""></a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>

    <!-- 引入外部JavaScript 文件-->
    <script src="scripts/switchover.js"></script>
    <!-- 在另一个 script 元素内部嵌入自己的 JavaScript 代码 -->
    <script type="text/javascript">
        // 调用 switchover.js 定义的 switchover 函数
        // 前两个参数都是选择器，后两个参数都是 class-name
        switchover('.tab-list>li', '.appliances-items>div', 'tab-active', 'appliances-item-container-active');
    </script>

    <div class="layout-wrapper home-banner-wrapper">
        <div class="layout-center home-banner-center">
            <a href="#">
                <img src="images/xiaomi-lock.webp">
            </a>
        </div>
    </div>

</body>

</html>